<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<body>
<h1>我是静态页面</h1>
<!--测试封装为bean-->
<form action="/saveUser" method="get">
   账号: <input type="text" name="username"/><br/>
    密码:<input type="text" name="password"><br/>
    学号:<input type="text" name="student.studentNumber"><br/>
    名字:<input type="text" name="student.studentName"><br/>
      <input type="submit" value="提交">
</form>

<!--测试返回的json数据-->
<button class="btn1" >点击加载json数据</button>
<table border="1">
    <tr>
        <td>账号</td>
        <td>密码</td>
        <td>学号</td>
        <td>姓名</td>
    </tr>
    <tr>
        <td class="username"></td>
        <td class="password"></td>
        <td class="studentNumber"></td>
        <td class="studentName"></td>
    </tr>
    <div style="width: 200px;height: 200px">
        <img class="img" src="">
    </div>
</table>
<script>

    let btn= $(".btn1");
       let td1=$(".username")
       let td2=$(".password")
       let td3=$(".studentNumber")
       let td4=$(".studentName")
         let img = $(".img")
    btn.click(()=>{
        queryJsonUser()
    })
       function  queryJsonUser() {
           axios.get("http://localhost:8080/getJsonUser").then(res=>{
               td1.html(res.data.username);
               td2.html(res.data.password);
               td3.html(res.data.student.studentNumber);
               td4.html(res.data.student.studentName);

           })
           axios.get("http://localhost:8080/imgRes").then(res=>console.log(res.data))
       }

</script>
</body>
</html>